<template>
  <div>
    <a-button type="primary" @click="openAddModal" style="margin-bottom: 10px;">添加</a-button>
    <a-table :columns="venueRequirementColumns" :data-source="venueRequirementData" row-key="key">
      <span slot="action" slot-scope="text, record">
        <span
          style="color: #028BE2; cursor: pointer; margin-right: 20px;"
          @click="openEditModal(record)"
        >编辑</span>
        <span
          style="color: #028BE2; cursor: pointer; margin-right: 20px;"
          @click="deleteVenueRequirement(record.key)"
        >删除</span>
      </span>
    </a-table>

    <a-modal
      :visible="modalVisible"
      title="教学场地要求信息"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
    >
      <div>
        <div>
          <span>教学场地名称: </span>
          <a-input v-model="currentRecord.venueName" />
        </div>
        <div>
          <span>不排课节次: </span>
          <a-select mode="multiple" style="width:200px;" v-model="currentRecord.notAllowedSections">
            <a-select-option v-for="section in allSections" :key="section" :value="section">
              {{ section }}
            </a-select-option>
          </a-select>
        </div>
        <div>
          <span>留用周次: </span>
          <a-input v-model="currentRecord.reservedWeeks" />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      venueRequirementColumns: [
        {
          title: '教学场地名称',
          dataIndex: 'venueName',
          key: 'venueName'
        },
        {
          title: '不排课节次',
          dataIndex: 'notAllowedSections',
          key: 'notAllowedSections'
        },
        {
          title: '留用周次',
          dataIndex: 'reservedWeeks',
          key: 'reservedWeeks'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 220,
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      venueRequirementData: [
        {
          key: '1',
          venueName: '普通教室',
          notAllowedSections: ['第5节'],
          reservedWeeks: '第1 - 2周'
        }
      ],
      allSections: ['第1节', '第2节', '第3节', '第4节', '第5节'],
      modalVisible: false,
      currentRecord: {
        key: null,
        venueName: '',
        notAllowedSections: [],
        reservedWeeks: ''
      },
      isAdding: false
    };
  },
  methods: {
    openAddModal() {
      this.isAdding = true;
      this.currentRecord = {
        key: null,
        venueName: '',
        notAllowedSections: [],
        reservedWeeks: ''
      };
      this.modalVisible = true;
    },
    openEditModal(record) {
      this.isAdding = false;
      this.currentRecord = { ...record };
      this.modalVisible = true;
    },
    handleModalOk() {
      if (this.isAdding) {
        const newKey = String(Number(this.venueRequirementData[this.venueRequirementData.length - 1].key) + 1);
        this.venueRequirementData.push({
          key: newKey,
          venueName: this.currentRecord.venueName,
          notAllowedSections: this.currentRecord.notAllowedSections,
          reservedWeeks: this.currentRecord.reservedWeeks
        });
      } else {
        const index = this.venueRequirementData.findIndex(item => item.key === this.currentRecord.key);
        if (index!== -1) {
          // 使用 Vue.set 确保响应式更新
          Vue.set(this.venueRequirementData, index, {
            ...this.venueRequirementData[index],
            venueName: this.currentRecord.venueName,
            notAllowedSections: this.currentRecord.notAllowedSections,
            reservedWeeks: this.currentRecord.reservedWeeks
          });
        }
      }
      this.modalVisible = false;
    },
    handleModalCancel() {
      this.modalVisible = false;
    },
    deleteVenueRequirement(key) {
      this.venueRequirementData = this.venueRequirementData.filter(item => item.key!== key);
    }
  }
};
</script>

<style scoped>
/* 可以添加一些样式 */
</style>